<html>

<head>
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript" src="https://libs.cdnjs.net/jquery/3.3.1/jquery.js"></script>
    <script type="text/javascript" src="https://libs.cdnjs.net/html2canvas/0.5.0-beta4/html2canvas.js"></script>

    <script type="text/javascript">
        $(document).ready(function () {
            $(".example1").on("click", function (event) {
                event.preventDefault();
                html2canvas(document.body, {
                    allowTaint: true,
                    taintTest: false,
                    onrendered: function (canvas) {
                        canvas.id = "mycanvas";
                        //document.body.appendChild(canvas);  
                        //生成base64图片数据  
                        var dataUrl = canvas.toDataURL();
                        var newImg = document.createElement("img");
                        newImg.src = dataUrl;
                        document.body.appendChild(newImg);
                    }
                });
            });

        });

    </script>
</head>

<body>

    Hello!
    <div class="" style="background-color: #abc;">
        demo
        <br>
    </div>

    <textArea id="textArea" col="20" rows="10"></textArea>
    <input class="example1" type="button" value="button">
    生成界面如下：
</body>

</html>